<template>
    <div id="dataTableView">
        <div class="control">
            <div class="btn">
                <el-button icon="el-icon-data-line" @click="modeChange">查看线路图</el-button>
            </div>
        </div>
        <div class="master" v-for="(master, i) in viewData" :key="'master' + i">
            <div class="master-name">{{ master.masterName }}</div>
            <div class="dev"  v-for="(dev, j) in master.lineDevList" :key="'dev' + j">
                <div class="dev-name">{{ dev.devCode }}</div>
                <div class="branch"  v-for="(branch, k) in dev.branchList" :key="'branch' + k">
                    <div class="branch-name">{{ branch.branchName }}</div>
                    <table class="table" @click="routeDeviceHistory(table)" :class="{ max: branch.maxLength === table.length }" v-for="(table, l) in branch.tableList" :key="'table' + l">
                        <tr class="tr" v-for="(row, n) in table" :key="'row' + n">
                            <td
                            v-for="(td, m) in row"
                            :key="'td' + m"
                            :class="{off: td.onlineStatus === 0}"
                            :id="td.id ? ('data' + td.id) : ''"
                            :colspan="td.length || 1">
                                {{ (td.text === '无' && td.onlineStatus === 0) ? '离线' : td.text}}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 定义 props
const props = defineProps({
    value: {
        type: Array,
        default: () => []
    }
});

// 定义响应式数据
const viewData = ref([]);

// 监听 props 的变化
watch(() => props.value, (data) => {
    if (data && data.length) {
        viewData.value = data;
    }
});

// 获取路由实例
const router = useRouter();

// 定义方法
const modeChange = () => {
    emit('modeChange', 1);
};

const routeDeviceHistory = (table) => {
    let devIds = [];
    table.forEach(row => {
        row.forEach(td => {
            if (td.devId) {
                devIds.push(td.devId);
            }
        });
    });
    router.push(`/deviceHistroy?devType=1&devIds=${devIds}`);
};

// 定义 emits
const emit = defineEmits(['modeChange']);
</script>

<style lang="scss">
#dataTableView {
    background: #fff;
    padding: 50px 30px 30px 30px;
    .control {
        line-height: 50px;
    }
    .master {
        text-align: center;
        .master-name {
            background: #2c77da;
            color: #fff;
            line-height: 30px;
        }
        .dev {
            text-align: left;
            border: 1px solid #ccc;
            overflow: hidden;
            margin-bottom: 10px;
            .dev-name {
                text-align: center;
                line-height: 30px;
                border-bottom: 1px solid #ccc;
                background: #f1f1f1;
            }
        }
        .branch {
            float: left;
            text-align: left;
            overflow: hidden;
            border-right: 1px solid #ccc;
            min-width: 200px;
            margin-top: -1px;
            .branch-name {
                text-align: center;
                line-height: 30px;
                border-bottom: 1px solid #ccc;
                border-top: 1px solid #ccc;
            }
            .table {
                border-collapse: collapse;
                float: left;
                min-width: 200px;
                border-bottom: 1px solid #ccc;
                .tr {
                    td {
                        border: 1px solid #ccc;
                        padding: 4px 0px;
                        text-align: center;
                        width: 44px;
                        &:first-child {
                            border-left: none;
                        }
                        &.off {
                            color: #ff0000;
                        }
                        &.success {
                            color: #2ebd41 !important;
                        }
                        &.error {
                            color: #ff0000 !important;
                        }
                        &.warning {
                            color: #faad14 !important;
                        }
                    }
                    &:first-child {
                        td {
                            border-top: none;
                        }
                    }
                }
                &:last-child {
                    border-right: none;
                    .tr {
                        td {
                            border-right: none;
                        }
                    }
                }
                & + .table {
                    border-left: 1px solid #ccc;
                    margin-left: -1px;
                }
                &.max {
                    .tr {
                        td {
                            border-bottom: none;
                        }
                    }
                }
            }
        }
    }
}
</style>
